import React from "react";
import {ActionIcon, Group, Tooltip} from "@mantine/core";
import {IconLocation, IconEyeCheck, IconEdit, IconTrash} from "@tabler/icons-react";
import {notifications} from "@mantine/notifications";
import {RecordProps} from "./interface";

const BUTTON_VARIANT = "light"; // 按钮样式
const BUTTON_SIZE = "sm"; // 按钮大小
const ICON_SIZE = 16; // 按钮图标大小
const BUTTON_RADIUS = "xs"; // 按钮图标圆角
const COLOR_ENTER = "teal"; // 设计按钮颜色
const COLOR_CHECK = "grape"; // 审核按钮颜色
const COLOR_EDIT = "blue"; // 编辑按钮颜色
const COLOR_DELETE = "red"; // 删除按钮颜色

// 若某一列渲染复杂，可单独拿出来
export function renderColumnAction(record: RecordProps) {
  return (
    <Group gap="xs" wrap="nowrap" justify="center">
      {/* [1] 进入按钮 */}
      <Tooltip label="进入项目" withArrow>
        <ActionIcon
          disabled={!record.accessable}
          size={BUTTON_SIZE}
          variant={BUTTON_VARIANT}
          color={COLOR_ENTER}
          radius={BUTTON_RADIUS}
          onClick={() => {
            console.log(`点击了${record.name}这一行的进入项目按钮`);
            notifications.show({
              color: COLOR_ENTER,
              title: "成功",
              message: `点击了${record.name}这一行的进入项目按钮`,
            });
          }}
        >
          <IconLocation size={ICON_SIZE} />
        </ActionIcon>
      </Tooltip>

      {/* [2] 审核按钮 */}
      <Tooltip label="审核" withArrow>
        <ActionIcon
          disabled={!record.checkable}
          size={BUTTON_SIZE}
          variant={BUTTON_VARIANT}
          color={COLOR_CHECK}
          radius={BUTTON_RADIUS}
          onClick={() => {
            console.log(`点击了${record.name}这一行的审核按钮`);
          }}
        >
          <IconEyeCheck size={ICON_SIZE} />
        </ActionIcon>
      </Tooltip>

      {/* [3] 修改按钮 */}
      <Tooltip label="修改" withArrow>
        <ActionIcon
          disabled={!record.editable}
          size={BUTTON_SIZE}
          variant={BUTTON_VARIANT}
          color={COLOR_EDIT}
          radius={BUTTON_RADIUS}
          onClick={() => {
            console.log(`点击了${record.name}这一行的修改按钮`);
          }}
        >
          <IconEdit size={ICON_SIZE} />
        </ActionIcon>
      </Tooltip>

      {/* [4] 删除按钮 */}
      <Tooltip label="删除" withArrow>
        <ActionIcon
          disabled={!record.deletable}
          size={BUTTON_SIZE}
          variant={BUTTON_VARIANT}
          color={COLOR_DELETE}
          radius={BUTTON_RADIUS}
          onClick={() => {
            console.log(`点击了${record.name}这一行的删除按钮`);
          }}
        >
          <IconTrash size={ICON_SIZE} />
        </ActionIcon>
      </Tooltip>
    </Group>
  );
}
